import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'constant.dart';

/// 请等待组件
Widget waitWidget = Center(
  child: Container(
    margin: EdgeInsets.only(left: ScreenUtil().setHeight(90)),
    alignment: Alignment.center,
    child: Row(
      children: <Widget>[
        Icon(
          Icons.watch_later,
        ),
        Text("正在加载数据,请稍等")
      ],
    ),
  ),
);

/// tab组件,使用时传入
/// 选项卡
// 选择详情还是评论
class HorizontalTab extends StatefulWidget {
  //Tab上的文字
  final List<String> strList;
  //Tab展示
  final List<Widget> widgetList;

  HorizontalTab({Key key, @required this.strList, @required this.widgetList})
      : super(key: key);

  @override
  _HorizontalTabState createState() => _HorizontalTabState(strList, widgetList);
}

class _HorizontalTabState extends State<HorizontalTab> {
  //Tab上的文字
  final List strList;
  //Tab展示
  final List<Widget> widgetList;

  ///State
  int choiseIndex = 0;

  ///构造器
  _HorizontalTabState(this.strList, this.widgetList);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        // Tab导航栏
        Container(
          height: ScreenUtil().setHeight(30),
          width: ScreenUtil().setWidth(278),
          margin: EdgeInsets.only(top: ScreenUtil().setHeight(10)),
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: Row(
            children: strList.map((item) {
              int index = strList.indexOf(item);
              return Expanded(
                child: Container(
                  height: ScreenUtil().setHeight(30),
                  decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        width: 1,
                        color: Colors.black26,
                      ),
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      // log
                      print("点击了tab");
                      setState(() {
                        choiseIndex = index;
                      });
                    },
                    child: Container(
                      padding: EdgeInsets.only(top: ScreenUtil().setHeight(6)),
                      child: Text(
                        strList[index],
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          // 选定判断
                          color: (choiseIndex == index)
                              ? Colors.pink
                              : Colors.black,
                          fontSize: ScreenUtil().setSp(11),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
        // 展示内容
        Container(child: widgetList[choiseIndex]),
      ],
    ));
  }
}

class BannerButton extends StatelessWidget {
  //cate 变量
  //高度
  final int height;
  //颜色
  final Color color;
  //主要图标
  final IconData mainIcon;
  //主要显示字符串
  final String mainShowMessage;
  final String secondShowMessage;
  //右侧的Icon
  final IconData leftIcon;
  final Function onTap;

  const BannerButton({
    Key key,
    this.height: 45,
    this.color: Colors.white,
    @required this.mainIcon,
    @required this.mainShowMessage,
    this.leftIcon: Icons.chevron_right,
    this.onTap,
    this.secondShowMessage:"",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _bannerButton(),
    );
  }

  // 我的订单
  Widget _bannerButton() {
    return Container(
      height: ScreenUtil().setHeight(height),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Colors.black12, width: 1),
        ),
      ),
      child: InkWell(
        onTap: onTap,
        child: Container(
          color: color,
          child: Row(
            children: <Widget>[
              // icon
              Container(
                padding: EdgeInsets.all(ScreenUtil().setWidth(13)),
                child: Icon(mainIcon),
              ),
              // text
              Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text(
                        mainShowMessage,
                        style: TextStyle(
                          fontSize: ScreenUtil().setSp(13),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Text(
                        secondShowMessage,
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          color: Colors.black38,
                          fontSize: ScreenUtil().setSp(9),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              // 右边的icon
              Container(
                padding: EdgeInsets.all(ScreenUtil().setWidth(13)),
                child: Icon(leftIcon),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class IconLine extends StatelessWidget {
  final List<IconData> iconList;
  final List<String> showStringList;
  final int height;
  final int iconSize;
  final int iconTopPadding;
  final int fontSize;
  final List<Function> clickFunctionList;
  const IconLine({
    Key key,
    @required this.iconList,
    @required this.showStringList,
    this.height: 61,
    this.iconSize: 24,
    this.iconTopPadding: 12,
    this.fontSize: 9,
    this.clickFunctionList,
  }) : super(key: key);

  //main
  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(height),
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: iconList.length,
          itemBuilder: (context, index) {
            return _oneRoom(index);
          }),
    );
  }

  // 小方格
  Widget _oneRoom(index) {
    return Container(
      color: Colors.white,
      height: ScreenUtil().setHeight(height),
      width: ScreenUtil().setWidth(Constant.MAX_WIDTH_SCREEN / iconList.length),
      child: InkWell(
        onTap: (index < clickFunctionList.length)
            ? clickFunctionList[index]
            : () {},
        child: Column(
          children: <Widget>[
            //图标
            Expanded(
              child: Container(
                padding: EdgeInsets.only(
                    top: ScreenUtil().setHeight(iconTopPadding)),
                child: Icon(
                  iconList[index],
                  size: ScreenUtil().setSp(iconSize),
                ),
              ),
            ),
            //显示文字
            Container(
              padding: EdgeInsets.all(10),
              child: Text(
                showStringList[index],
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(fontSize),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
